<template>
  <div class="page-container">
	<!--新增编辑界面-->
	<el-dialog :title="add?'物料出库新增':'物料出库编辑'" width="80%"   :visible.sync="dialogVisible" custom-class="myHeadClass" :close-on-click-modal="false" @opened="getDetials"  :before-close="handleClose">
		
		   <div   style="float:left;">
		<el-form :model="subDataForm" label-width="70px"  :inline="true" :rules="dataFormRules" ref="dataForm" size="mini"
			label-position="right">
		 
					<el-form-item label="ID" prop="id" v-if="false">
						<el-input v-model="subDataForm.id" disabled="true" auto-complete="off"></el-input>
					</el-form-item>
				
					<el-form-item :label="$t('field.receipt.receiptNo')" prop="receiptNo">
						<el-input v-model="subDataForm.receiptNo" auto-complete="off"></el-input>
					</el-form-item>
		 
					<el-form-item label="去向" prop="direction" >
						<el-input v-model="subDataForm.direction" auto-complete="off"></el-input>
					</el-form-item>
		 
					<el-form-item :label="$t('field.receipt.stn')"  prop="stn" >
						<el-select v-model="subDataForm.stn"  :placeholder="$t('action.select')" style="width: 100%;">
							<el-option v-for="item in dicts.stnOut" :key="item.value"  :value="item.value"
								:label="item.label">
							</el-option>
						</el-select>
					</el-form-item>
				
			 			
		</el-form>
		</div>

 
		<div class="app-container" >
			<el-table v-loading="listLoading"  :key="componentKey" :data="dto.detList"  height="250" border fit highlight-current-row style="width: 100%" size="mini">
			
			<el-table-column class-name="status-col"  :label="$t('field.itemName')"    min-width="110" prop="itemId"  align="center" fixed="right"  header-align="center"  :formatter="itemFilter">
				
			</el-table-column>
			<el-table-column width="200px"   :label="$t('field.planCount')"    align="center"  fixed="right"  header-align="center" >
			
				<template slot-scope="{row}"  >
					<template v-if="row.edit">
						<el-input v-model="row.planCount" class="edit-input" size="mini"  />
					</template>
					<span  v-else  style="cursor: pointer;"  >{{ row.planCount }}</span>
				</template>
			
			</el-table-column>
		
			<el-table-column align="center" :label="$t('action.edit')" width="120" fixed="right" >
				<template slot-scope="{row}">
					<el-button v-if="row.edit" type="text" size="mini"  @click="tableChange(row)"  >
						{{$t('action.comfirm')}} 
					</el-button>
					<el-button v-else type="text" size="mini"  @click="tableChange(row)" > 
						{{$t('action.edit')}} 
					</el-button>
				</template>
			</el-table-column>


			<el-table-column :label="$t('action.operation')" width="105" fixed="right"  header-align="center" align="center">	
				<template slot-scope="scope">
				<kt-button   :label="$t('action.delete')"   perms="doo:item:delete"  type="text" @click="handleDelete(scope.$index, scope.row)" />
				</template>
			</el-table-column>
			
			</el-table>
		</div>
	   <div slot="footer" class="dialog-footer">
	 
		    <el-button size="mini" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>  
			<el-button size="mini"  @click.native="handleAddDetailEdit"  >增加明细 </el-button>
		</div>
	
	</el-dialog>
	  <item-select   :itemDialogVisible="itemDialogVisible" @handleSelect="handleSelect"   @itemHidden="itemHidden"></item-select>
  
  </div>
</template>

<script>
 
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import Column from "@/views/Core/Column"
import {getItemName} from "@/utils/myUtil"
import ItemSelect from "@/views/Basic/Material/ItemSelect"
export default {
	name: 'EditReceiptOut',
	components:{
 
		KtButton,
		ItemSelect,
		Column,
	},
	filters: {
	
  },
	props:{
		
		subDataForm:{
			type: Object
		},
	    dialogVisible:{
			type: Boolean
		},
		add:{
			type: Boolean
		}
	},
	
	data() {
		return {
			size: 'mini',
			   listLoading: false,
			   dto:{detList:[],deleteIds:[]},
		
			Items: [],	
			pageResult: {},
			componentKey:0,
			editLoading: false,
			pageRequest: { pageNum: 1, pageSize: 2000 },
			itemDialogVisible:false,
		
			dicts:this.$store.state.dict.dicts
		}
	},
	computed: {
		dataFormRules() {
					const dataFormRules= {
						stn:[{ required: true, message: "请输入站台号", trigger: 'blur' }],
						receiptNo:[{ required: true, message: "请输入站台号", trigger: 'blur' }]
						};
					return dataFormRules;
			}	
	},
	methods: {
		itemFilter:  function (row, column, cellValue, index){
			return getItemName(cellValue , this.Items) 
      	},
		 	
		handleDelete:function(index,row){
			if(row.id>0){
				this.dto.deleteIds.push(row.id)
			}
			this.dto.detList.splice(index,1)
				
		},
		handleSelect:function(data){	
			debugger
			for(var i=0;i<data.length;i++){
				this.dto.detList.push({itemId:data[i],edit:false});
			}
			this.itemHidden();
		 
	
		},
		handleClose:function(done){
		  this.$emit('receiptHidden', {})
 			done();
		},
		itemHidden:function(){
			this.itemDialogVisible=false;
		},
		// 获取分页数据
		 getDetials :function() {
			 debugger
			if(this.subDataForm==undefined||this.subDataForm.id==undefined||this.subDataForm.id==0){
				return;
			}
			this.listLoading = true
			this.$api.doo.getDetials(this.subDataForm).then((res) => {
				const items = res.data
				this.dto.detList = items.map(v => {
					this.$set(v, 'edit', false) 
					return v
				}) 
			    this.listLoading = false
					this.componentKey += 1; 
			})
		},
		
		tableChange: function (row) {
			row.edit=!row.edit;
			this.componentKey += 1; 
			 
		},
		
		
		handleAddDetailEdit: function () {
			this.componentKey += 1; 
			this.itemDialogVisible = true
			 
		},
		handleHiddenOut: function (params) {
			this.$emit('receiptHidden', {})
		},
		// 编辑
		submitForm: function () {
			debugger
			if (this.subDataForm.status == 2 || this.subDataForm.status == 3) {
        		this.$message({ message: "出库单非待执行状态无法修改", type: 'error' })
      		} else {
				  
				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
								this.editLoading = true
							 this.dto.main=this.subDataForm;
							
							this.$api.doo.saveDoo(this.dto).then((res) => {
								this.editLoading = false
								if(res.code == 200) {
									
									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
									this.handleHiddenOut();
							
								} else {
									this.$message({message: this.$t('action.operateFail') + res.msg, type: 'error'})
								}
							
							})								
						})
					}
				})
	  		}
		}
		
		
		
	},	
	mounted() {
	
	 this.Items=this.$store.state.dict.item
	

	}
}
</script>

<style scoped>
  .myHeadClass .el-dialog__header{
    background-color: #ff00ff !important;;
  }
  </style>